<template>
  <div>
    <div>小功能示例</div>
    <p class="tip">此处后续会添加一些常用的测试小功能</p>
    <div>
      <p>第一个小功能：copy</p>
      <div style="font-size: 12px; color: gray">我是要被copy的内容。ID：9527</div>
      <el-button type="primary" @click="copyTest">copy</el-button>
    </div>
    <div style="margin-top: 30px">
      <p>第二个小功能：文件及图片下载</p>
      <div>
        <img v-for="(url, index) in initData.imgs" :key="index" style="height: 50px" :src="url" />
      </div>
      <el-button type="primary" @click="downloadImgs">图片批量下载</el-button>
      <el-button type="primary" @click="downloadFile">pdf文档批量下载</el-button>
    </div>
    <div style="margin-top: 30px">
      <p>第三个小功能：hooks写法</p>
      <div style="font-size: 12px; color: gray">获取鼠标点击的位置信息</div>
      <div style="font-size: 12px; color: gray">
        实际使用的功能可以参考rrweb，这个功能是录屏操作，可以记录你的使用过程，将使用过程的数据保存在数据库。使用场景例如线上复杂问题记录，方便后续分析处理。
      </div>
      <div style="font-size: 12px; color: gray">使用场景1：例如线上复杂问题记录，方便后续分析处理。</div>
      <div style="font-size: 12px; color: gray">使用场景2：例如银行，保险等线上签约流程，需要记录所有操作流程备案</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { clipboard } from '@/utils/clipboard'
import { initDownload } from '@/utils/downImgAndFiles'
import point from '@/hooks/usePoint'
const initData = reactive({
  imgs: [
    'https://imgs2.58moto.com/forum/20210322/7067289_1616407259491.jpeg!nowater?_2723_2042',
    'https://imgs2.58moto.com/forum/20210322/7067289_1616407261273.jpeg!nowater600?_2440_1830',
    'https://imgs2.58moto.com/forum/20210322/7067289_1616407254351.jpeg!nowater600?_2542_1906'
  ],
  files: ['http://pkg.jddmoto.com/file/2021-07-15/1626339649750_VOGE无极300RR国四联合电子电喷说明书_360132476-0001.pdf']
})

// hooks使用
point({ info: '传参方式' })

// 复制功能
const copyTest = () => {
  clipboard('我是要被copy的内容。ID：9527')
}

// 图片批量下载
const downloadImgs = () => {
  initDownload(initData.imgs)
}

// pdf文档批量下载
const downloadFile = () => {
  initDownload(initData.files)
}
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
  color: rgb(80, 79, 77);
  margin: 20px 0;
}
</style>
